{extend name="public/common"}

{block name="style"}
<title>个人中心</title>
<link rel="stylesheet" href="/home/css/user/info.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="type-title">个人信息</div>
    <div class="body">
        <ul>
            <li>
                <span>头像</span>
                <div class="img-box" @click="updateAvatar">
                    <img :src="detail.header?detail.header:'/home/images/common/default.png'" />
                </div>
                <i class="fa fa-angle-right" @click="updateAvatar"></i>
            </li>
            <li>
                <span>姓名</span>
                <!--<span @click="editName()">{{detail.name}}</span>-->
                <!--<i class="fa fa-angle-right" @click="editName()"></i>-->
                <span>{{detail.name}}</span>
            </li>
            <li>
                <span>性别</span>
                <span>{{detail.gender > 0?detail.gender == 1?'男':'女':''}}</span>
            </li>
            <li>
                <span>部门</span>
                <span>{{detail.department_name?detail.department_name:'暂无'}}</span>
            </li>
            <li>
                <span>职位</span>
                <span>{{detail.position?detail.position:'无'}}</span>
            </li>
            <li>
                <span>手机号</span>
                <span>{{detail.mobile?detail.mobile:'暂无'}}</span>
            </li>
        </ul>
        <input type="file" style="display: none;" accept="image/jpg, image/png, image/gif, image/jpeg" @change="handleFileChange" ref="upimg">
    </div>
</div>
{/block}

{block name="script"}
<script>
    console.log({$detail})
    var vw = new Vue({
        el: "#app",
        data: {
            detail:{$detail}
        },
        methods: {
            updateAvatar() {
                var upImg = this.$refs.upimg
                upImg.click()
            },
            handleFileChange() {
                var _this = this;
                var upImg = _this.$refs.upimg;
                var img = upImg.files[0];
                console.log(img)
                if(img){
                    var newSize = (img.size/1024).toFixed(2);
                    if(newSize <= 102400){
                        _this.$indicator.open({
                            text: '图片上传中',
                            spinnerType: 'triple-bounce'
                        });
                        var formData = new FormData();
                        formData.append('picture',img);
                        _this.$http.post("{:Url('File/uploadPicture')}",formData).then(function (res) {
                            var data = JSON.parse(res.data);
                            console.log(data)
                            if(data.code == 1){
                                _this.$http.post("{:Url('User/info')}",{'value':data.data.path,'key':'header'},{emulateJSON: true}).then(function (res) {
                                    console.log(res);
                                    _this.$indicator.close()
                                    if(res.body.code == 1){
                                        _this.$toast({
                                            message: '头像更新成功',
                                            iconClass: 'icon',
                                            duration: 1500
                                        });
                                        _this.detail.header = data.data.path
                                    }else{
                                        _this.$toast({
                                            message:"修改失败，请重新上传！",
                                            duration:1500
                                        });
                                    }
                                })
                            }else{
                                _this.$indicator.close();
                                _this.$toast({
                                    message:"上传失败，请重新上传！",
                                    duration:1500
                                });
                            }
                        },function (res) {
                            _this.$indicator.close();
                            _this.$toast({
                                message:"上传失败，请重新上传！",
                                duration:1500
                            });
                        });
                    }else{
                        _this.$toast("单张上传图片大小不能超过100M,请重新上传！");
                    }
                }
            },
            editName() {
                var _this = this;
                _this.$messagebox.prompt('请输入您的名称').then(function (res) {
                    _this.$indicator.open({
                        text: '正在修改中',
                        spinnerType: 'triple-bounce'
                    });
                    _this.$http.post("{:Url('User/info')}",{'value':res.value,'key':'name'}, {emulateJSON: true}).then(function (res) {
                        console.log(res.data)
                        var data = res.data;
                        if (data.code == 1) {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "修改成功",
                                iconClass: "icon",
                                duration: 1500
                            });
                            _this.detail.name = res.value;
                        } else {
                            _this.$indicator.close();
                            _this.$toast({
                                message: "修改失败，请重试！",
                                duration: 1500
                            });
                        }
                    }, function (res) {
                        _this.$indicator.close();
                        _this.$toast({
                            message: "修改失败，请重试！",
                            duration: 1500
                        });
                    });
                }).catch(function () {

                })
            }
        }
    })
</script>
{/block}
